var Capacity = Vue.component('capacity', {
    data() {
        return {
            editStatus: true,   // 是否可编辑
            userInfo: {         // 当前信息
                departs: [],
                dayOutPuts: [],
                requirePros: [],
                requireDeparts: [],
                standards: []
            },
            userInfoOld: {      // 其实存储的信息
                departs: [],
                dayOutPuts: [],
                requirePros: [],
                requireDeparts: [],
                standards: []
            },
            departs: {},        // 当前要添加的核心部门
            requirePros: {},    // 当前质量要求
            requireDeparts: {}, // 部门
        }
    },

    template: `<div class="capacity__box">
                    <div class="capacity__con">
                        <h3 class="index__title capacity__title">产量产能</h3>
                        <div class="index__info capacity__info">
                            <div class="index__table__list capacity__table__list">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th>核心部门</th>
                                            <th>人数</th>
                                        </tr>
                                        <tr v-for="(item, index) in userInfo.departs" :key="index">
                                            <td>
                                                <span>{{ item.key }}</span>
                                            </td>
                                            <td>
                                                <input placeholder="输入" type="number" v-model="item.num" :disabled="editStatus">
                                                <b v-show="!editStatus" @click="deleteInfo('departs', index)">—</b>
                                            </td>
                                        </tr>
                                        <tr v-show="!editStatus">
                                            <td>
                                                <input placeholder="输入" v-model="departs.key">
                                            </td>
                                            <td>
                                                <input placeholder="输入" type="number" v-model="departs.value">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="index__table__add" v-show="!editStatus">
                                    <span @click="addNumeInfo('departs')">+</span>
                                </div>
                            </div>
                            <div class="capacity__day__num">
                                <div class="capacity__num__con">
                                    <span>日产量：</span>
                                    <input placeholder="输入" type="number" :disabled="editStatus" v-model="userInfo.dayOutPuts[0]" :disabled="editStatus">
                                    <i>——</i>
                                    <input placeholder="输入" type="number" :disabled="editStatus" v-model="userInfo.dayOutPuts[1]" :disabled="editStatus">
                                </div>
                            </div>
                            <div class="index__table__list capacity__table__list">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th>产品类型</th>
                                            <th>检验类型（几道）</th>
                                        </tr>
                                        <tr v-for="(item, index) in userInfo.requirePros" :key="index">
                                            <td>
                                                <span>{{ item.key }}</span>
                                            </td>
                                            <td>
                                                <input placeholder="输入" type="number" v-model="item.val" :disabled="editStatus">
                                                <b v-show="!editStatus" @click="deleteInfo('requirePros', index)">—</b>
                                            </td>
                                        </tr>
                                        <tr v-show="!editStatus">
                                            <td>
                                                <input placeholder="输入" v-model="requirePros.key" :disabled="editStatus">
                                            </td>
                                            <td>
                                                <input placeholder="输入" type="number" v-model="requirePros.val" :disabled="editStatus">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="index__table__add" v-show="!editStatus">
                                    <span @click="addNumeInfo('requirePros')">+</span>
                                </div>
                            </div>
                            <div class="index__table__list capacity__table__list">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th>部门</th>
                                            <th>人数</th>
                                        </tr>
                                        <tr v-for="(item, index) in userInfo.requireDeparts" :key="index">
                                            <td>
                                                <span>{{ item.key }}</span>
                                            </td>
                                            <td>
                                                <input placeholder="输入" type="number" v-model="item.num || 0" :disabled="editStatus">
                                                <b v-show="!editStatus" @click="deleteInfo('requireDeparts', index)">—</b>
                                            </td>
                                        </tr>
                                        <tr v-show="!editStatus">
                                            <td>
                                                <input placeholder="输入" v-model="requireDeparts.key" :disabled="editStatus">
                                            </td>
                                            <td>
                                                <input placeholder="输入" type="number" v-model="requireDeparts.num" :disabled="editStatus">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="index__table__add" v-show="!editStatus">
                                    <span @click="addNumeInfo('requireDeparts')">+</span>
                                </div>
                            </div>
                            <div class="capacity__tip">
                                <h6>质量标准（本标准供质检、总检、车间生产使用）</h6>
                                <p>《工艺单》、样品</p>
                                <p>摊平用尺量用目视用手摸</p>
                                <p>质检：每件产品全检</p>
                                <p>总检：抽查品质、尺寸</p>
                                <p>巡检：对在线生产产品存查</p>
                            </div>
                        </div>
                    </div>
                    <div class="common__btn">
                        <div class="common__btn__box">
                            <span class="common__btn__sure" v-show="editStatus" @click="setEditFun">编辑</span>
                            <span class="common__btn__close" v-show="!editStatus" @click="setCancelFun">取消</span>
                            <span class="common__btn__sure" v-show="!editStatus" @click="updateUserInfo">保存设置</span>
                        </div>
                    </div>
                </div>`,

    methods: {
        setEditFun: function () {  // 编辑
            this.editStatus = !this.editStatus
        },
        setCancelFun: function () { // 取消
            var data = JSON.stringify(this.userInfoOld);
            this.userInfo = JSON.parse(data);
            this.editStatus = !this.editStatus;
        },
        addNumeInfo(_name) {
            // 新增信息
            this.userInfo[_name].push(this[_name]);
            this[_name] = {};
            ELEMENT.Message.success('添加成功');
        },
        deleteInfo(_name, _index) {
            // 删除信息的某一条
            var _data = [];
            this.userInfo[_name].filter((item, index) => {
                if(index != _index) {
                    _data.push(item);
                } 
            })
            this.userInfo[_name] = _data;
            ELEMENT.Message.success('删除成功');
        },
        getUserInfo() {
            // 获取用户信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/com-yield-list",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 1
                },
                success:function(res){
                    if(0 == res.code) {
                        var data = res.data;

                        var dataString = JSON.stringify(data);
                        self.userInfo = JSON.parse(dataString);
                        self.userInfoOld = JSON.parse(dataString);
                    }
                }
            })
        },
        updateUserInfo() {
            // 修改用户信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/com-yield-set",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 2,
                    yields: this.userInfo
                },
                success:function(res){
                    if(0 == res.code) {
                        ELEMENT.Message.success('保存成功');
                        self.editStatus = !self.editStatus;
                    }
                }
            })
        }
    },
    mounted() {
        
    },

    created() {
        // 获取公司产量产能
        this.getUserInfo();
    },
})